<template>
    <el-card shadow="never" class="auth-config">
        <div class="module">
            <div class="title-box">企业授权基本配置</div>
            <div v-if="infoData.suite_auth" class="impower_matter">
                <div class="left">
                    <div class="text">
                        <div class="wordy">企业名称：</div>
                        {{ infoData.corp_info.corp_name }}
                    </div>
                    <div class="text">
                        <div class="wordy">企业主体：</div>
                        {{ infoData.corp_info.corp_full_name }}
                    </div>
                    <div class="text">
                        <div class="wordy">企业微信Corpld：</div>
                        {{ infoData.corp_info.corp_id }}
                    </div>
                    <div class="text">
                        <div class="wordy">绑定时间：</div>
                        {{ infoData.suite_auth_at }}
                    </div>
                </div>
                <div class="right">
                    <el-image :src="infoData.corp_info.logo" style="width: 120px; height: auto"></el-image>
                </div>
            </div>
            <div v-else class="impower_matter">
                <div class="box">
                    <div class="left">
                        <el-image
                            src="https://bkt-scrm-test.oss-cn-shanghai.aliyuncs.com/keyid-scrm-server/tmp-file/2022-03-17/waW2EJ1V5vPy6ejLdqYTREjA0dpxLq9BNQ3r.png"
                            style="width: 77px; height: 64px"></el-image>
                    </div>
                    <div class="right">
                        <div class="tip-word">您还没有授权客易达SCRM管理您的企业微信</div>
                        <div>
                            <el-button v-auth="'DIRECT_AUTHORIZATION'" type="primary" plain @click="onAuth()"
                                >直接授权</el-button
                            >
                            <el-button type="primary"
                                ><a
                                    v-auth="'SETTING_INFORMATION'"
                                    href="/authorization-guide"
                                    target="_blank"
                                    class="guide-box"
                                    >配置引导</a
                                ></el-button
                            >
                            <el-button v-if="isShowRefreshBtn" :icon="Refresh" @click="onRefreshPage">刷新</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <template v-if="infoData.suite_auth && infoData.customized_app_auth">
      <div class="module">
        <div class="title-box">企业通讯录配置<a href="/authorization-guide" target="_blank" class="guide-box">配置引导</a></div>
        <el-form label-position="right" label-width="130px" :model="infoData">
          <el-form-item label="Secret">
            <el-input v-model="infoData.contact.secret" :disabled="!showSecret1" placeholder="请输入" />
            <template v-if="showSecret1">
              <el-button @click="showSecret1 = false">取消</el-button>
              <el-button type="primary" @click="onUpdateSecret(1)">保存</el-button>
            </template>
            <el-button v-else @click="showSecret1 = true">修改</el-button>
          </el-form-item>
          <el-form-item label="URL">
            <el-input disabled v-model="infoData.contact.url" />
            <el-button v-if="infoData.contact.url" type="text" @click="Copy(infoData.contact.url)">复制</el-button>
          </el-form-item>
          <el-form-item label="Token">
            <el-input disabled v-model="infoData.token" />
            <el-button v-if="infoData.token" type="text" @click="Copy(infoData.token)">复制</el-button>
          </el-form-item>
          <el-form-item label="EncodingAESKey">
            <el-input disabled v-model="infoData.aeskey" />
            <el-button v-if="infoData.aeskey" type="text" @click="Copy(infoData.aeskey)">复制</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="module">
        <div class="title-box">客户联系配置<a href="/customer-guide" target="_blank" class="guide-box">配置引导</a></div>
        <el-form label-position="right" label-width="130px" :model="infoData">
          <el-form-item label="Secret">
            <el-input v-model="infoData.customer.secret" :disabled="!showSecret2" placeholder="请输入" />
            <template v-if="showSecret2">
              <el-button @click="showSecret2 = false">取消</el-button>
              <el-button type="primary" @click="onUpdateSecret(2)">保存</el-button>
            </template>
            <el-button v-else @click="showSecret2 = true">修改</el-button>
          </el-form-item>
          <el-form-item label="URL">
            <el-input disabled v-model="infoData.customer.url" />
            <el-button v-if="infoData.customer.url" type="text" @click="Copy(infoData.customer.url)">复制</el-button>
          </el-form-item>
        </el-form>
      </div>
       <div class="module">
      <div class="title-box">侧边栏配置<div class="text">配置指引</div></div>
      <el-form label-position="right" label-width="130px" :model="Author.sidebar_book">
        <el-form-item label="内容引擎页面地址">
          <el-input disabled style="width: 580px" v-model="Author.sidebar_book.url" />
          <span class="text" @click="Copy(Author.sidebar_book.url)">复制</span>
        </el-form-item>
        <el-form-item label="客户详情地址">
          <el-input disabled style="width: 580px" v-model="Author.sidebar_book.token" />
          <span class="text" @click="Copy(Author.sidebar_book.token)">复制</span>
        </el-form-item>
        <el-form-item label="发红包地址">
          <el-input disabled style="width: 580px" v-model="Author.sidebar_book.encoding_aes_key" />
          <span class="text" @click="Copy(Author.sidebar_book.encoding_aes_key)">复制</span>
        </el-form-item>
      </el-form>
    </div> 
    </template> -->
    </el-card>
</template>

<script lang="ts" setup>
import { ref, reactive, onBeforeUnmount } from 'vue';
import { useStore } from '@/store';
import useClipboard from 'vue-clipboard3';
import { ElMessage } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue';
import {
    getChannelConfigInfo,
    setContactSecret,
    setCustomerSecret,
    getChannelConfigState,
    getInstallUrl
} from '@/api/channel/authconfig';
import router from '@/router';

const store = useStore();

interface InfoData {
    suite_auth: boolean;
    customized_app_auth: boolean;
    suite_auth_at: string;
    token: string;
    aeskey: string;
    corp_info: any;
    contact: any;
    customer: any;
}

const { toClipboard } = useClipboard();
const showSecret1 = ref(false);
const showSecret2 = ref(false);
const isShowRefreshBtn = ref(false);
// const pollTime = ref()
const infoData: InfoData = reactive({
    suite_auth: false,
    customized_app_auth: false,
    suite_auth_at: '',
    token: '',
    aeskey: '',
    corp_info: {},
    contact: {},
    customer: {}
});

const creatData = () => {
    getChannelConfigInfo().then((res: any) => {
        infoData.suite_auth = res.suite_auth || false;
        infoData.customized_app_auth = res.customized_app_auth || false;
        infoData.suite_auth_at = res.suite_auth_at || '';
        infoData.token = res.token || '';
        infoData.aeskey = res.aeskey || '';
        infoData.corp_info = res.corp_info || {};
        infoData.contact = res.contact || {};
        infoData.customer = res.customer || {};
    });
};

creatData();

const onRefreshPage = () => {
    getChannelConfigState().then((res2: any) => {
        if (res2.suite_auth) creatData();
    });
};

const onUpdateSecret = (t: number) => {
    const { contact, customer } = infoData;
    if (t === 1) {
        setContactSecret({ secret: contact.secret }).then(() => {
            ElMessage.success('修改成功');
            showSecret1.value = false;
        });
    }
    if (t === 2) {
        setCustomerSecret({ secret: customer.secret }).then(() => {
            ElMessage.success('修改成功');
            showSecret2.value = false;
        });
    }
};

const onAuth = () => {
    const currentCorp = store.getters['user/getCurrentCorp'] || '';
    getInstallUrl({ new_corp_id: currentCorp, callback_front_url: location.href }).then((res: any) => {
        window.open(res.link);
        isShowRefreshBtn.value = true;
        // pollTime.value = setInterval(() => {
        //   getChannelConfigState().then((res2: any) => {
        //     if (res2.suite_auth) {
        //       creatData()
        //       clearInterval(pollTime.value)
        //     }
        //   })
        // }, 5000)
    });
};

const Copy = async (val: any) => {
    try {
        await toClipboard(val);
        ElMessage.success('复制成功');
    } catch (e) {
        ElMessage.error('复制失败');
    }
};

// onBeforeUnmount(() => {
//   clearInterval(pollTime.value)
// })
</script>

<style lang="scss" scoped>
.auth-config {
    height: calc(100vh - 145px);
    width: 100%;
    background: white;
    display: flex;
    flex-direction: column;
    padding: 45px 0 0 30px;
    box-sizing: border-box;
    font-size: 14px;

    .module {
        margin-bottom: 40px;

        .title-box {
            margin-bottom: 20px;
            padding-left: 16px;
            border-left: 4px solid #ff6b00;

            .guide-box {
                margin-left: 20px;
                color: #ff6b00;
            }
        }

        .impower_matter {
            margin-top: 21px;
            width: 100%;
            display: flex;
            flex-direction: row;

            .left {
                width: 500px;
                display: flex;
                flex-direction: column;
                margin-right: 15px;

                .text {
                    width: 100%;
                    height: 15px;
                    display: flex;
                    flex-direction: row;
                    margin-bottom: 20px;
                    color: #33302d;

                    &:last-of-type {
                        margin-bottom: 0;
                    }

                    .wordy {
                        width: 130px;
                        text-align: right;
                    }
                }
            }

            .box {
                width: 800px;
                height: 150px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;

                .left {
                    width: 80px;
                }

                .right {
                    height: 70px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-evenly;
                    color: #969696;
                    line-height: 20px;

                    .guide-box {
                        // margin-left: 20px;
                        color: #fff;
                        text-decoration: none;
                    }

                    .tip-word {
                        margin-bottom: 10px;
                    }
                }
            }
        }

        .el-form {
            .el-form-item {
                margin-bottom: 16px;

                .el-input {
                    width: 580px;
                }

                .el-button {
                    margin-left: 10px;
                }

                &:last-of-type {
                    margin-bottom: 0;
                }
            }
        }
    }
}
</style>
